<template>
<div class="container">
	<div id="row">
		<div class="col-md-12">
			<h3 class="text-center">预约产品演示</h3>
		</div>
	</div>
	<div id="row">
		<div class="col-md-12">
			<p class="text-center">请完善以下信息，我们的顾问会在1个工作日内与您联系，为您安排产品演示服务。(仅对企业客户开放)</p>
		</div>
	</div>
	<form id="defaultForm" action="" method="post" class="form-horizontal">
		<div class="form-group" >
			<label for="product" ><span>*</span> 想了解的产品</label>
			<select class="form-control" id="product" name="product" v-model="producid">
				
			    <Option v-for="item in productList" :value="item.id" :key="item.tname">
					{{item.tname }}
				</Option>
			</select>
		</div>

		<div class="form-group">
			<label for="cname"><span>*</span> 姓名</label>
			<input type="text" class="form-control" name="cname" id="cname" v-model="cname" placeholder="请输入您的姓名" />
		</div>
		
		<div class="form-group">
			<label for="cphone"><span>*</span> 手机号码</label>
			<input type="text" class="form-control" id="cphone" name="cphone" v-model="cphone" placeholder="请输入手机号码" />
		</div>
		<div class="form-group">
			<label for="code"><span>*</span> 验证码</label>
		</div>
		<div class="form-group">
			<div class="col-md-10">
				<input type="text" class="form-control" id="code" name="code" v-model="code" placeholder="请输入验证码" />
			</div>
			<div class="col-md-2">
				<button class="btn btn-primary ">验证码</button>
			</div>
		</div>
		<div class="form-group">
			<label for="cemail"><span>*</span> 邮箱</label>
			<input type="email" class="form-control" id="cemail" v-model="cemail" name="cemail" placeholder="请输入邮箱" />
		</div>
		<div class="form-group">
			<label for="cbname"><span>*</span> 公司名称</label>
			<input type="text" class="form-control" id="cbname" name="cbname" v-model="cbname" placeholder="请输入公司名称" />
		</div>
		<div class="form-group">
			<label for="cbscale"><span>*</span> 公司规模</label>
			<select class="form-control" id="cbscale" name="cbscale" v-model="cbscale">
			  <option value="20人以下">20人以下</option>
			  <option value="50-200人">50-200人</option>
			  <option value="200-500人">200-500人</option>
			  <option value="500-1000人">500-1000人</option>
			  <option value="1000人以上">1000人以上</option>
			  
			</select>
		</div>
		<div class="form-group">
			<label for="job"><span>*</span> 公司职务</label>
			<select class="form-control" id="job" v-model="job" name="job">
				<option value="总经理">总经理</option>
				  <option value="副总经理">副总经理</option>
				  <option value="高级职员">高级职员</option>
				  <option value="中级职员">中级职员</option>
				  <option value="普通职员">普通职员</option>
			</select>
		</div>
		<div class="form-group">
			<label for="comm">备注</label>
			<textarea class="form-control" rows="3" id="comm" v-model="comm" name="comm" ></textarea>
		</div>
		
		<div class="form-group">
			
			<div class="col-md-12">
				<button type="button" id="validateBtn" name="validateBtn" class="btn btn-primary btn-lg btn-block" @click="show">预约产品展示</button>
			</div>
		</div>
		<div class="form-group text-center">
			<label>
				  <input type="checkbox" name="chk" value="1"> 预约产品即代表演示 <a href="">《隐私保护协议》</a>
			</label>
		</div>
	</form>
</div>



</template>


<script>
// import $ from 'jquery'
import '@/static/bootstrap/js/jquery-1.11.2.min.js'
// import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'
// import '@/static/bootstrap/js/bootstrap.js'
// import '@/static/bootstrap/css/bootstrap.css'
import {baseUrl} from '../util/global.js'
import '@/static/bootstrap/dist/css/bootstrapValidator.css'
import '@/static/bootstrap/dist/js/bootstrapValidator'

$(document).ready(function() {
			

})
export default {
    name: 'ProductReservation',
	mounted() {
		this.getProduct()
		this.jqueryvalidate()
	},
    methods: {
		getProduct() {
			let that = this;
			
            $.get(baseUrl+"/selectProductInfo.action", function(data){
				that.productList = data.data;
            }, 'json')
		},
        show() {
			let that = this;
			var bootstrapValidator = $("#defaultForm").data('bootstrapValidator');
			bootstrapValidator.validate();
			if(!bootstrapValidator.isValid()) {
				return
			}
		
            $.get(baseUrl+"/insertConsult.action",{producid:that.producid,cname:that.cname,cphone:that.cphone,code:that.code,cemail:that.cemail,cbname:that.cbname,cbscale:that.cbscale,job:that.job,comm:that.comm}, function(data){
				console.log("测试数据",data);
				if(data.msg == "预约成功"){
					alert("预约成功");
				}else{
					alert("预约失败！");
				}
            }, 'json')
        },
		jqueryvalidate() {
		$('#defaultForm').bootstrapValidator({
								 message: 'This value is not valid',
								 feedbackIcons: {
					             valid: 'glyphicon glyphicon-ok',
					             invalid: 'glyphicon glyphicon-remove',
					             validating: 'glyphicon glyphicon-refresh'
						         },
						         fields: {
						         	cname: {
								               validators: {
								                   notEmpty: {
								                       message: '姓名不能为空'
								                   },
								                   stringLength: {
								                        min: 2,
								                        max: 30,
								                        message: '用户名长度必须大于2个字符且小于30个字符'
								                    }
								                    // regexp: {
								                    //     regexp: /^[a-zA-Z0-9_\.]+$/,
								                    //     message: '用户名只能由字母、数字、点和下划线组成'
								                    // }
								               }
								      },
								      cphone:{
								      	 validators: {
								                   notEmpty: {
								                       message: '手机号码不能为空'
								                   },
								                   regexp:{
								                   		regexp: /^[0-9]{11}$/,
								                   		message: '手机号码为11位'
								                   }
								      	 }
						         	  },
						         	  cemail:{
						         	  	validators: {
								                   notEmpty: {
								                       message: '邮箱不能为空'
								                   },
								                   regexp:{
								                   		regexp: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
								                   		message: '邮箱格式不正确'
								                   }
								      	 }
						         	  		
						         	  },
						         	  cbname:{
						         	  	validators: {
								                   notEmpty: {
								                       message: '公司名称不能为空'
								                   }
								      	 }
						         	  },
						         	  agreement:{
						         	  	validators: {
								                   notEmpty: {
								                       message: '必须勾选不能为空'
								                   }
								      	 }
						         	  	
						         	  },
									   chk: {
						         	  	validators: {
								                   notEmpty: {
								                       message: '必须勾选不能为空'
								                   }
								      	 }
						         	  	
						         	  }
							    }
							})

							// $('#product').on('hidden.bs.select', function (e) { //该方法注册到$(function(){})函数中
							// 	var tmpSelected = $('#product').val();
							// 	if(tmpSelected != null){
							// 	$('#productf').val(tmpSelected);
							// 	}else {
							// 	$('#productf').val("");
							// 	}
							// 	//由于input为hidden，验证会出现一些bug，此处手动验证隐藏的input组件
							// 	$('#defaultForm').data('bootstrapValidator').updateStatus('productf', 'NOT_VALIDATED').validateField('productf');
							// 	});
			
		}
    },
    data () {
        return {
            producid:"",
			cname:"",
			cphone:"",
			code:"",
			cemail:"",
			cbname:"",
			cbscale:"",
			job:"",
			comm:"",
			productList:""
        }
    }, 
	created() {
		this.jqueryvalidate()
	}
}
</script>

<style scoped>
	.container{
		text-align:left;
	}
	form{
				width: 800px;
				margin: 0 auto;
			}
			form span{
				color: red;
			}
</style>